<template>
  <el-container style="height: 100%; width: 100%">
    <Header />
    <el-main>
      <div class="banner">
        <img class="banner_bg" src="" alt />

        <div class="customer_banner_wrap">
          <MaskContent
            title="消费金融业务系统"
            content="翔盛悦为持牌消费金融公司、商业银行个人金融部、小贷公司、科技金融公司等开发的消费金融业务系统，可根据客户需要实现线上获客，在线风控审批，实时或准实时放款、到期自动代扣还款及用户自动还款，同时有配套的后台运营系统，实现信贷从贷前、贷中、贷后的各类需求。同时，对客户统一产品入口，后台自动根据用户风险级别匹配不同的贷款产品，可实现不同用户不同产品不同定价，同时提供借款、合同签署及查看、还款的全线上服务。"
          />
        </div>
      </div>

      <system-introduce :systemData="systemData" :introduceImg="introduceImg" phoneView="width: 40%;" />

      <div class="system-overview_wrapper">
        <custom-caption class="customer_caption" title="系统截图" content="" />
        <system-overview :systemImgData="systemImgData" />
      </div>

      <Footer />
    </el-main>
  </el-container>
</template>

<script>
import Header from "../../components/header/Header";
import MaskContent from "../../components/MaskContent";
import SystemIntroduce from "./components/systemIntroduce";
import CustomCaption from "../../components/CustomCaption";
import SystemOverview from "./components/systemOverview";
import Footer from "../../components/footer/Footer";

export default {
  name: "onlineCarRental",
  components: {
    Header,
    MaskContent,
    SystemIntroduce,
    CustomCaption,
    SystemOverview,
    Footer
  },
  data() {
    return {
      systemData: [
        {
          functionsName: "系统特色",
          functionsDes: [
            "系统特色方面，翔盛悦消费金融业务系统采用松耦合设计，可根据实际细分业务进行重组，拥有多种业务场景渠道接入能力，满足消费金融多种业务模式需要。同时，集成多家征信、支付、电子签章、OCR、活体识别第三方等，系统可用性强。"
          ]
        }
      ],
      introduceImg: require("../../assets/image/consumerFinance/Clay_White.png"),
      systemImgData: [
        {
          imgUrl: require("../../assets/image/consumerFinance/消费金融业务系统1.png")
        },
        {
          imgUrl: require("../../assets/image/consumerFinance/消费金融业务系统2.png")
        },
        {
          imgUrl: require("../../assets/image/consumerFinance/消费金融业务系统3.png")
        },
        {
          imgUrl: require("../../assets/image/consumerFinance/消费金融业务系统4.png")
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
.banner {
  position: relative;
}
.banner_bg {
  content: url("../../assets/image/operatingLoan/banner.png") !important;
  width: 100%;
}

.customer_banner_wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.system-overview_wrapper {
  background-color: $gray_bgc;

  .customer_caption {
    text-align: center;
    padding-top: 40px;
  }
}

/**
移动端样式
 */
@media screen and (max-width: $mobile_width) {
  .banner_bg {
    content: url("../../assets/image/operatingLoan/banner_m.jpg") !important;
    min-height: 200px;
  }
}
</style>
